<template>
    <div class="nav">
        <el-row>
            <el-col :span="24" class="contacts-col">
                <el-row type="flex" align="middle">
                    <el-menu active-text-color="#ffd04b" background-color="#0a0a0a" class="el-menu-vertical-demo"
                        default-active="2-1" text-color="#fff" @open="handleOpen" @close="handleClose"
                        @select="handleSelect">
                        <el-menu-item index="1">
                            <el-icon><icon-menu /></el-icon>
                            <span>公司组织架构</span>
                        </el-menu-item>

                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>最近联系人</span>
                            </template>
                            <el-row type="flex" align="middle" v-for="(item, index) in data.firends">
                                <el-menu-item :index="'2-' + (index + 1)">
                                    <div class="demo-image__preview">
                                        <el-image style="width: 60px; height: 60px ; border-radius: 0.5em;"
                                            :src="item.imgUrl" :zoom-rate="1.2" :initial-index="4" fit="cover" />
                                        <span class="friend-name">{{ item.nickName }}</span>
                                    </div>
                                </el-menu-item>
                            </el-row>
                        </el-sub-menu>
                    </el-menu>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script  setup>
import { onMounted, reactive } from 'vue';
import { getNotice } from '@/api/index'
import { getFriends } from '@/api/index'
import { toUserStore } from '@/store/user'
import { Menu as IconMenu, } from '@element-plus/icons-vue'
  onMounted(async () => {

   await doGetFriends();

   toUserStore().setToUserInfo(data.firends[0])
})


const data = reactive({
    sysNotice: {
        id: "",
        createDate: null,
        title: "得瑟得瑟",
        notice: "",
    },
    firends: [

    ],
})


//获取公告信息

getNotice().then(res => {
    data.sysNotice = res;
}).catch(error => {
    console.log(error, "请求数据");
})

const handleSelect = (index, indexPath, item) => {
    console.log("进入选中菜单", item)
}

const handleOpen = (key, keyPath) => {
    console.log("进入菜单选中", key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
const doGetFriends = async () => {
    console.log("查找朋友start")
    await getFriends().then(res => {
        data.firends = res;
        data.toUser = data.firends[0];
        console.log("查找朋友ing")
    }).catch(error => {
        console.log(error, "请求数据");
    })
    console.log("查找朋友end")

}

</script>

<style scoped>
.nav {
    background-color: #0a0a0a;
    /* border-top-left-radius: 1em; */
    border-bottom-left-radius: 1em;
    width: 250px;
    color: white;
    /* padding-top: 10%; */
    text-align: center;
    height: 87.5vh;
    position: absolute;
}

.el-menu {
    border-right: 0px !important;
}

.friend-name {
    line-height: 60px;
    font-size: 30px;
    margin-left: 10px;
}
</style>